<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import = "com.zzty.taskapp.entity.User"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap.css" rel="stylesheet" />

<!-- CUSTOM STYLES-->
<link href="../css/custom.css" rel="stylesheet" />
</head>
<script type="text/javascript">
	function getTime() {
		var date = new Date().toLocaleString();
		document.getElementById("date").value = date;
	}
	setInterval(getTime, 0);

	function ajaxCall(method, url, callBackFunction, date) {

		var httprequest = new XMLHttpRequest();
		httprequest.onreadystatechange = function() {
			if (httprequest.readyState == 4 && httprequest.status == 200) {
				callBackFunction(httprequest.responseText);
			}
		}
		httprequest.open(method, url, true);
		httprequest.setRequestHeader("X-Requested-With", "AJAX");
		httprequest.send(date);
	}

	function initradio(rName, rValue) {
		var rObj = document.getElementsByName(rName);

		for (var i = 0; i < rObj.length; i++) {
			if (rObj[i].value == rValue) {
				rObj[i].checked = 'checked';
			}
		}
	}

	var jsonObj;
	function searchInfo() {
		var tb = document.getElementById("table1");
		var rowNum = tb.rows.length;
		for (i = 1; i < rowNum; i++) {
			tb.deleteRow(i);
			rowNum = rowNum - 1;
			i = i - 1;
		}
		var targetdate = document.getElementById("targetdate").value;
		ajaxCall("Post", "../TeamGradeServlet?operation=show", showInfo,
				targetdate);
	}

	function showInfo(result) {
		if (result == "当天无结对") {
			document.getElementById("tarea1").value = result;
		} else {
			var obj = JSON.parse(result);
			jsonObj = obj;
			var qstContent = obj[0].qstContent;
			document.getElementById("tarea1").value = qstContent;
			for ( var i in obj) {
				var stuName = obj[i].stuNames;
				var totalTime = obj[i].totalTime;
				var score = obj[i].score;
				var answer = obj[i].answer;
				var isValid = obj[i].isValid;

				var newTr = document.getElementById("table1").insertRow();

				var newTdStu = newTr.insertCell();
				newTdStu.innerText = stuName;
				var newTdTime = newTr.insertCell();
				newTdTime.innerText = totalTime;
				var newTdScore = newTr.insertCell();
				newTdScore.innerText = score;
				var newTdButton = newTr.insertCell();
				newTdButton.innerHTML = '<button type="button" onclick = "showAnswer(this)" class="btn btn-success" data-toggle="modal" data-target="#myModal">点击评价</button>';
			}
		}
	}
	function showAnswer(row) {
		var trow = row.parentNode.parentNode.rowIndex;
		var teamMember = document.getElementById("table1").rows[trow].cells[0].innerHTML;
		var score1 = document.getElementById("table1").rows[trow].cells[2].innerHTML;
		var selects = document.getElementsByName("score");  
	   	if(score1 == "未评价"){
	   		initradio("score", "A");
	   	}else{
			for (var i=0; i<selects.length; i++){  
		        if (selects[i].value==score1){
		            selects[i].checked= true;  
		            break;  
		        }
		    }
	   	}
		document.getElementById("teamMember").innerHTML = teamMember;
		document.getElementById("tarea3").value = "";
		var i = row.parentNode.parentNode.rowIndex - 1;
		var targetdate = document.getElementById("targetdate").value;
		var stuIds = jsonObj[i].stuIds;
		document.getElementById("text1").value = i + 1;
		document.getElementById("text2").value = targetdate;
		document.getElementById("text3").value = stuIds;
		var answer = jsonObj[i].answer;
		if (jsonObj[i].isValid == 0) {
			initradio("score", "D");
			document.getElementById("div1").style.visibility = "hidden";
		} else {
			document.getElementById("div1").style.visibility = "visible";
		}
		document.getElementById("tarea2").value = answer;
	}

	function grade() {
		var row = document.getElementById("text1").value;
		var radio = document.getElementsByName("score");
		for (i = 0; i < radio.length; i++) {
			if (radio[i].checked) {
				var tab = document.getElementById("table1");
				tab.rows[row].cells[2].innerHTML = radio[i].value;
			}
		}
		var score = tab.rows[row].cells[2].innerHTML;
		var comment = document.getElementById("tarea3").value;
		var targetdate = document.getElementById("text2").value;
		var stuIds = document.getElementById("text3").value;
		var evaluation = "{\"score\":\"" + score + "\",\"comment\":\""
				+ comment + "\",\"targetdate\":\"" + targetdate
				+ "\",\"stuIds\":\"" + stuIds + "\"}";
		// 		var evaluation = {
		// 				score: score,
		// 				comment: comment,
		// 				targetdate: targetdate,
		// 				stuIds: stuIds
		// 		};
		ajaxCall("Post", "../TeamGradeServlet?operation=grade", doshow,
				evaluation);
	}

	function doshow() {
		alert("评价成功");
	}

	function setRank() {
		var operation = "sRank";
		var targetdate = document.getElementById("targetdate").value;
		ajaxCall("post", "../TeamGradeServlet?operation=" + operation,
				alertResult, targetdate);
	}

	function alertResult(result) {
		alert(result);
	}
	
	<%
	User user = (User) request.getSession().getAttribute("user");
	String img = (String) user.getImg();
	%>
</script>
<body>

	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</ button>
				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"><img src="<%=img%>"
						class="user-image img-responsive" /></li>


					<!-- 					<li><a href="../index.jsp"><i -->
					<!-- 							class="fa fa-dashboard fa-3x"></i> 主页</a></li> -->
					<!-- 					<li><a href="UserInfo.jsp"><i class="fa fa-table fa-3x"></i> -->
					<!-- 							个人信息</a></li> -->
					<li><a href="TeacherSelfExam.jsp"><i
							class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>
					<li><a href="TeamGrade.jsp"><i class="fa fa-qrcode fa-3x"></i>
							结对批改</a></li>
					<li><a href="AssginTask.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 竞赛布置</a></li>
					<li><a href="grouping.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 结对分组</a></li>
					<li><a href="StudentScore.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 学生成绩</a></li>
					<li><a href="DataBaseSelect.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 数据库查询</a></li>
					<!-- 					<li><a href="ChangePassword.jsp"><i -->
					<!-- 							class="fa fa-edit fa-3x"></i> 密码修改 </a></li> -->

				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<h2>结对作业评分</h2>
					</div>
				</div>
				<!-- /. ROW  -->
				<hr />

				<div class="col-sm-offset-10 col-sm-2">
					<input id="date" style="background: transparent; border: none;"
						disabled="true"font-size:50px;"></input>
				</div>

				<div class="row" style="padding: 50px 0px 0px 0px">
					<div class="col-sm-offset-4 col-sm-8">
						请选择日期：<input type="date" id="targetdate" /> <input type="button"
							class="btn btn-primary" onclick="searchInfo()" value="查找" />
					</div>
				</div>
				<div class="row">
					<div class="col-sm-offset-3 col-sm-9"
						style="padding: 50px 20px 0px 20px">
						<textarea id="tarea1" rows="15" cols="60"
							style="background: transparent" disabled="true"></textarea>
					</div>
				</div>
				<div class="row" style="padding: 50px 20px 0px 20px">

					<div class="table-responsive">
						<table class="table table-striped" id="table1"
							style="text-align: center">
							<thead>
								<tr>
									<th style="text-align: center">组员</th>
									<th style="text-align: center">用时(min)</th>
									<th style="text-align: center">评分</th>
									<th style="text-align: center">进行评价</th>
								</tr>
							</thead>

							<tbody>


							</tbody>
						</table>

					</div>
					<div class="col-sm-offset-5 col-sm-7">
						<button class="btn btn-primary" onclick="setRank()">生成结果</button>
					</div>
				</div>

			</div>
		</div>
		<!-- /. PAGE INNER  -->
	</div>
	<!-- /. PAGE WRAPPER  -->

	<!-- /. WRAPPER  -->
	<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
	<!-- JQUERY SCRIPTS -->
	<script src="../js/jquery-1.10.2.js"></script>
	<!-- BOOTSTRAP SCRIPTS -->
	<script src="../js/bootstrap.min.js"></script>
	<!-- METISMENU SCRIPTS -->
	<script src="../js/jquery.metisMenu.js"></script>

	<!-- 模态框（Modal） -->

	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 800px; height: 500px;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">结对评分—<span id="teamMember"></span></h4>
				</div>
				<div class="modal-body">
					<div style="width: 58%; float: left; padding: 20px 0px">
						学员答案
						<textarea id="tarea2" rows="15" cols="60"
							style="background: transparent" disabled="true"></textarea>
					</div>

					<div style="width: 35%; float: right; padding: 20px 0px">
						评语
						<textarea name="comment" id="tarea3" rows="10" cols="35"
							style="background: transparent"></textarea>

					</div>

					<div id="div1" style="width: 35%; float: right; padding: 15px 0px">
						打分<br /> <input value="A" type="radio" name="score">A
						&nbsp;&nbsp;&nbsp; <input value="B" type="radio" name="score">B
						<br /> <input value="C" type="radio" name="score">C
						&nbsp;&nbsp;&nbsp; <input value="D" type="radio" name="score">D
					</div>
					<div id="div2" style="display: none;">
						<input id="text1"></input> <input id="text2" name="targetdate"></input>
						<input id="text3" name="stuIds"></input>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" onclick="grade()" class="btn btn-primary"
						data-dismiss="modal">提交</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

</body>
</html>
